﻿@model SearchBoxModel
@using Nop.Web.Models.Catalog;
@{
    var searchTooltip = T("Search.SearchBox.Tooltip");
}
<div id="search-bar" class="search-box pull-right">
    @using (Html.BeginRouteForm("ProductSearch", FormMethod.Get, new { name = "SearchForm", id = "SearchForm"}))
    {
        <div class="search-wrap pull-right">
            <div id="searchIntelligent" class="intelligent">
                <input type="text" class="hint search-box-text" id="small-searchterms" autocomplete="off" value="@searchTooltip" name="q" />
                @Html.Widget("searchbox_before_search_button")
            </div>
            <button type="submit" class="btn btn-primary btn-search pull-right">@T("Search")</button>
        </div>
        <script type="text/javascript">
            seajs.use("jquery", function($) {
                $(function(){
                    $("#small-searchterms").focus(function() {
                        if (this.value == '@searchTooltip') {
                            this.value = '';
                        }
                    });

                    $("#small-searchterms").blur(function() {
                        if (this.value == '') {
                            this.value = '@searchTooltip';
                        }
                    });
                    $("#SearchForm").on("submit", function (e) {
                        var $search_terms = $("#small-searchterms");
                        var search_terms_val = $.trim($search_terms.val());
                        if (search_terms_val == "" || search_terms_val.toLowerCase() == '@searchTooltip'.toLowerCase()) {
                            alert('@Html.Raw(HttpUtility.JavaScriptStringEncode(T("Search.EnterSearchTerms").Text))');
                            $search_terms.focus();
                            e.preventDefault();
                        }
                        return true;
                    });
                });
            });
        </script>

        if (Model.AutoCompleteEnabled)
        {
            <script type="text/javascript">
                // for auto complete search.
                seajs.use(["common/1.0.0/index","autosuggest/1.0.0/index"], function(app, autosg){
                    app(function (){
                        autosg.autoSuggest('#small-searchterms','@(Url.RouteUrl("ProductSearchAutoComplete"))',{
                            delay: 500,
                            minChars: @(Model.SearchTermMinimumLength.ToString()),
                            queryParam:'term',
                            startText:'@T("Search.SearchBox.Tooltip")',
                            asHtmlID:'small-searchterms',
                            selectedItemProp:'label',
                            selectedValuesProp:'producturl',
                            searchObjProps:'label,producturl',
                            emptyText:'',
                            selectionLimit :1,
                            retrieveComplete:function(data){
                                return data;
                            },
                            resultClick:function(elem){
                                app.setLocation(elem.attributes.producturl);
                            },
                            formatList:function(data, $elem){
                                var t = data.label;
                                return $elem.append("@(Model.ShowProductImagesInSearchAutoComplete ? Html.Raw("<img src='\" + item.productpictureurl + \"'>") : null)"+t);
                            }
                        });
                    });
                });
            </script>
        }
        @Html.Widget("searchbox")
    }
</div>